import type { Meta, StoryObj } from "@storybook/react";
import React from "react";
import PercentLine from "./index";

const meta = {
  title: "样式原子组件/百分比进度条-PercentLine",
  component: PercentLine,
  tags: ["autodocs"],
  argTypes: {
    backgroundColor: {
      control: "color",
    },
  },
  decorators: [
    (Story) => (
      <div style={{ backgroundColor: "#06112B" }}>
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof PercentLine>;

export default meta;
type Story = StoryObj<typeof meta>;

export const backgroundColor: Story = {
  args: {
    backgroundColor: "red",
    percent: 10,
  },
};

export const strokeColor: Story = {
  args: {
    strokeColor: "#D5A479",
    percent: 50,
  },
};

export const gradientColor: Story = {
  args: {
    strokeColor: {
      from: "#3B5EEF",
      to: "#76ACF6",
    },
    percent: 80,
  },
};
